<template style="height: 100%">
  <div class="yqh">
    <!--<img src="../../assets/images/yqh.png" alt="">-->
    <div class="title">
      <!--<span>尊敬的领导</span>-->
      <!--<br/>-->
      <span>尊敬的：{{info.theme}}</span>
      <br/>
      <span>宴席时间：{{info.invitationTime}}</span>
      <br/>
      <span @click="navgaode">宴席地址：
        <!--<a :href="'https://m.amap.com/navi/?start=&dest='+destLngLat+'&destName=思明区&naviBy=car&key='+mapkey">{{info.address}}</a>-->
       {{info.address}}
      </span>
      <br/>
      <span>包厢号：{{info.addressDetail}}</span>
      <br/>
      <span>联系电话：{{info.phone}}</span>
      <br/>
      <span>备注：{{info.notes}}</span>
    </div>
    <div class="blessing">英拉酒业祝您用餐愉快！</div>
    <share-pop v-if="isOpen" @isClose="closePop"></share-pop>

  </div>
</template>

<script>
  import SharePop from '../public/sharePop.vue'
  import global from '../public/global.vue'

  export default {
    name: "invitation",
    data() {
      return {
        isOpen: false,
        info: {},
        destLngLat: '',
        destLatLng:'',//baidu
        mapkey: global.mapKey,
        address: '',
        destName: '',
      }
    },
    components: {
      'share-pop': SharePop
    },
    methods: {
      //关闭提示弹窗
      closePop(val) {
        this.isOpen = val;
      },
      navgaode(){
        window.location.href='https://uri.amap.com/marker?position='+localStorage.getItem('destLngLat');
      },
    },
    created: function () {
      document.title = "邀请函";
      let id = this.$route.query.id;
      let self = this;
      let city = self.$store.getters.getCity;
      let url = global.apiUrl;
      self.$http.get(url + '/myShare/getMyShare?id=' + id).then(res => {
        self.info = res.data.data;
        self.address = res.data.data.address;
        //global.wxShare(window.location.href, res.data.data.theme, self);
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: city,
          })
          geocoder.getLocation(self.address, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // result中对应详细地理坐标信息
              localStorage.setItem("destLngLat", result.geocodes[0].location.lng + ',' + result.geocodes[0].location.lat);
//              localStorage.setItem("destLatLng", result.geocodes[0].location.lat + ',' + result.geocodes[0].location.lng);


            }
          })
        })
      })
      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId", uid);
      }
      if (window.localStorage.getItem("shareId") != null) {

        global.bindRelation(window.localStorage.getItem("shareId"), this)
      }
      let text = "http://www.yingla9.com/dist/#/invitation?id=" + id + "&uid=" + window.localStorage.getItem("uid");
      global.wxShare(window.location.href, "邀请函", text, self);
    },
    mounted: function () {
      let self = this;
//      let city = self.$store.getters.getCity;
      self.$nextTick(function () {
//        AMap.plugin('AMap.Geocoder', function () {
//          var geocoder = new AMap.Geocoder({
//            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
//            city: city,
//          })
//          geocoder.getLocation(self.address, function (status, result) {
//            if (status === 'complete' && result.info === 'OK') {
//              // result中对应详细地理坐标信息
//              self.destLngLat = result.geocodes[0].location.lng + ',' + result.geocodes[0].location.lat;
//              console.log(self.destLngLat);
//            }
//          })
//        })

      })


    }
  }
</script>

<style lang="less" scoped>
  .yqh {
    background: url("../../assets/images/yqh.png") center no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    img {
      width: 100%;
      height: 100%;
    }
    .title {
      width: 75%;
      text-align: center;
      font-size: 0.9rem;
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;
      margin: auto;
      span {
        display: inline-block;
        margin-bottom: 3%;
        border-bottom: 1px solid #333;
      }
    }
    /*祝福语*/
    .blessing {
      position: absolute;
      bottom: 2%;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0.65rem;
      color: #fff;
    }
  }
</style>
